import React from 'react';
import { inject, observer } from 'mobx-react';
import {WeaTableNew} from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;

import { WeaErrorPage, WeaTools,WeaTop,WeaTab,WeaRightMenu,WeaLocaleProvider } from 'ecCom';
import isEmpty from 'lodash/isEmpty'
import FnaPermission from '../../public/FnaPermission';
import {getGhostButton} from '../../public/FnaButton'
import {openUrl} from '../../util/pulic-func'
import FnaSearchCondition from '../../public/FnaSearchCondition'
import AccountModal from './AccountModal'
const getLabel = WeaLocaleProvider.getLabel;

/**
 * 报表列表
 */
@inject('customeListStore')
@observer
class CustomList extends React.Component {
	constructor(props) {
		super(props);
		this.reportId = '';
		this.reportName = '';
	}

	componentDidMount() {
		let {initDatas} = this.props.customeListStore;
        //初始化数据
		initDatas();
	}
	
	componentWillReceiveProps(nextProps) {
		
	}
	
	shouldComponentUpdate(nextProps, nextState) {
		
		return true;
	}

	componentWillUnmount() {
		//组件卸载时一般清理一些状态

	}

	render() {
		
		const { customeListStore } = this.props;
		const {loading,tableStore,nameQuery,title,editData} = customeListStore;                                             
		const {hasRight,setNameQuery} = customeListStore;                                             
		const {searchCondition,searchForm,showSearchAd,setShowSearchAd,accountVislble,
			   setAccountVislble,accountColumns,accountDataSource,resetAccountData} = customeListStore;                                             

		return (
			<div style={{height: '100%'}}>
			  {hasRight == 1 && <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@2wp1tr`} 
			  	datas={this.getRightMenu()}
			  	collectParams={{favname:title, favouritetype:5}}
			   >
				<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@lfux5t`}
					title={title}
					loading={loading}
					icon={<i className='icon-coms-Finance'/>}
					iconBgcolor='#f14a2d'
					buttons={this.getTopRightButton()}
					buttonSpace={10}
					showDropIcon={true}
					dropMenuDatas={this.getRightMenu()}
				>
				
				<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@7us39b`}
					searchType={['base','advanced']}
					searchsBaseValue={nameQuery}//默认值
					onSearch={this.baseSearch.bind(this)}
					onSearchChange={this.onSearchChange}
					setShowSearchAd={this.setShowSearchAd}
					hideSearchAd={this.doHideSearchAd}
					searchsAd={
					  <FnaSearchCondition ecId={`${this && this.props && this.props.ecId || ''}_FnaSearchCondition@sfp07v`} searchCondition={searchCondition} searchForm={searchForm} labelCol={4} wrapperCol={20}/>
					}
					showSearchAd={showSearchAd}
					buttonsAd={this.getAdButtons(this.props.ecId || '')}
					advanceHeight={80}
				/>

				<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@bzc2n9`} 
                    comsWeaTableStore={tableStore}
                    onOperatesClick={this.operator}
                    getColumns={this.getColumnsInfo}
					hasOrder={true}
                />
                </WeaTop>
			 </WeaRightMenu>}
			 <AccountModal ecId={`${this && this.props && this.props.ecId || ''}_AccountModal@hqdn9z`} 
				 visible={accountVislble}
				 accountColumns={accountColumns}
				 accountDataSource={accountDataSource}
				 resetAccountData={resetAccountData}
				 close={()=>{setAccountVislble(false)}}
				 rowClick={(value)=>{
					const {id,reportName,typeIdComb} = editData;
					const {accountIds,approvalIds} = value;
					this.open(id,reportName,accountIds,approvalIds,typeIdComb);
				 }}
			 />
             {hasRight == 4 && <FnaPermission ecId={`${this && this.props && this.props.ecId || ''}_FnaPermission@ioseph`}/>}
			</div>
		)
	}
	
	doHideSearchAd = () => {
		this.props.customeListStore.setShowSearchAd(false);
    }
	
	setShowSearchAd = (bool) => {
		this.props.customeListStore.setShowSearchAd(bool);
	}

	onSearchChange = (value) => {
		const {searchForm,setNameQuery} = this.props.customeListStore;                                             
		setNameQuery(value);
		searchForm.updateFields({
			reportName: {
				value: value
			}
		});
	}

	//重构Table
	getColumnsInfo = (data) => {
		const that = this;
		if(!isEmpty(data)){
			for(let index=0;index<data.length;index++){
				let key = data[index].dbField;
				if(key === 'reportName'){
		            data[index].render = (text, record, index) => {
						return (<a onClick={that.openEditPage.bind(that,record)}>{text}</a>);
					}
		        }
	      	}
		}
	}

	/**
	*获取右键菜单
	*/
	getRightMenu = () => {
		const { customeListStore } = this.props;
		const { dataKey,tableStore } = customeListStore;
		let btns = [];

	     btns.push({
	            key:"view",
	    		icon: <i className='icon-coms-Custom'/>,
	            content:getLabel(32535,'显示列定制'),
	            onClick: () =>{
	                tableStore.setColSetVisible(dataKey,true);
	    		    tableStore.tableColSet(dataKey,true);
            	}
	     });
	    return btns;
	}

	//Top右侧按钮菜单
	getTopRightButton = () => {
		let btns = [];
		return btns;
	}

	//基础搜索
    baseSearch = (value) => {
		let {doSearch,nameQuery} = this.props.customeListStore;
		let data = value.trim();
		doSearch({reportName:nameQuery});
	}
	
	//高级搜索按钮
	getAdButtons = (ecId) => {
		const { setShowSearchAd,clearAdvanceForm,loading,setNameQuery,searchForm } = this.props.customeListStore;
		return [
		  getGhostButton(()=>{this.advanceSearch();setNameQuery(searchForm.getFormParams().reportName);},loading,getLabel(197,'搜索'),ecId+'_Search_CustomList'),
		  getGhostButton(()=>{clearAdvanceForm();},loading,getLabel(2022,'重置'),ecId+'_Reset_CustomList'),
		  getGhostButton(()=>{setShowSearchAd(false);},loading,getLabel(31129,'取消'),ecId+'_Cancel_CustomList')
		];
	}
	
	//高级搜索
	advanceSearch = (value) => {
		const { searchForm,doSearch,setShowSearchAd } = this.props.customeListStore;
		let queryParam = searchForm.getFormParams();
		Object.assign(queryParam);

		setShowSearchAd(false);
		doSearch(queryParam);
	}

	//操作判断按钮
	operator = (record,index,operate,flag) => {
		if(flag == '0'){//查看
			this.openReport(record);
		}
	}

    //弹出
	openEditPage = (record) => {
		this.openReport(record);
	}

	openReport = (vlaue) => {
		const { customeListStore } = this.props;
		const { getAccountList,setAccountVislble,setEditData } = customeListStore;
		const {id,reportName,approvalIds,typeIdComb} = vlaue;
		let params = {reportId:id};
		setEditData(vlaue);

		getAccountList(params,()=>{
			setAccountVislble(true);
		},(value)=>{
			//setAccountVislble(true);
			this.open(id,reportName,value.accountId,approvalIds,typeIdComb);
		});
	}

	open = (reportId,reportName,accountIds,approvalIds,typeIdComb) => {
		openUrl('/spa/fnaMulDimensions/static/index.html#/main/fnaMulit/customReport?'+'reportId='+reportId+"&reportName="+reportName+"&accountIds="+accountIds+"&typeIdComb="+typeIdComb+"&approvalIds="+approvalIds);
	}
}


export default WeaTools.tryCatch(React,
	props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@x4h8b1`} msg={ props.error ? props.error : getLabel(385218,'对不起,该页面异常,请联系管理员!')} />,
	{error: ""}
)(CustomList);




